import React from 'react';

const DocsPage = () => {
  return (
    <div className="docs-container">
      <h1>Mini-XAF Documentation</h1>
      
      <section className="doc-section">
        <h2>Overview</h2>
        <p>
          Mini-XAF is a JavaScript/React implementation of DevExpress XAF architecture, 
          designed for true front-end and back-end separation. This framework preserves 
          the core concepts and architectural advantages of XAF while leveraging modern 
          web technologies to provide a more flexible front-end experience.
        </p>
      </section>
      
      <section className="doc-section">
        <h2>Core Concepts</h2>
        
        <article className="doc-concept">
          <h3>Application</h3>
          <p>
            The entry point of the Mini-XAF framework. Manages application lifecycle, 
            windows, and modules. Initializes the application by loading the model 
            definition from the server.
          </p>
          <pre><code>{`const app = Application.getInstance();
await app.initialize('https://your-xaf-api-url');`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>Window</h3>
          <p>
            Represents the main application window that contains multiple frames. 
            A window can have one active frame at a time.
          </p>
          <pre><code>{`const window = app.createWindow('main', 'Main Window');
app.setActiveWindow(window);`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>Frame</h3>
          <p>
            A container for views. Each frame displays a single view at a time.
          </p>
          <pre><code>{`const frame = window.createFrame('customers', 'Customers');
window.setActiveFrame(frame);`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>View</h3>
          <p>
            The base class for all views in Mini-XAF. Views display data to the user.
            The framework provides two main view types: ListView and DetailView.
          </p>
        </article>
        
        <article className="doc-concept">
          <h3>ListView</h3>
          <p>
            Displays multiple records in a grid format using DevExtreme DataGrid.
          </p>
          <pre><code>{`const listView = new ListView('customerList', 'Customers', dataSource);
listView.setColumns([
  { fieldName: 'id', caption: 'ID', width: 50 },
  { fieldName: 'name', caption: 'Name', width: 200 },
  // ...
]);
frame.setView(listView);`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>DetailView</h3>
          <p>
            Displays and edits a single object with all its properties using DevExtreme Form.
          </p>
          <pre><code>{`const detailView = new DetailView('customerDetail', 'Customer Details');
detailView.setObject(customer);
frame.setView(detailView);`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>ViewController</h3>
          <p>
            Contains business logic and responds to view events. Controllers can register
            actions that users can execute.
          </p>
          <pre><code>{`class MyViewController extends ViewController {
  constructor() {
    super('MyViewController');
    
    const action = new Action('MyAction', 'My Action');
    action.setExecuteHandler(() => this.onMyAction());
    this.registerAction(action);
  }
  
  private onMyAction(): void {
    // Execute business logic
  }
}

const controller = new MyViewController();
view.addController(controller);`}</code></pre>
        </article>
        
        <article className="doc-concept">
          <h3>Action</h3>
          <p>
            Represents a user-executable operation like Save, Delete, etc. Actions are 
            registered with view controllers and displayed in the view UI.
          </p>
        </article>
        
        <article className="doc-concept">
          <h3>PropertyEditor</h3>
          <p>
            Renders and edits specific property types in a DetailView. The framework 
            provides property editors for common data types like strings, numbers, 
            booleans, dates, and dropdown lists.
          </p>
        </article>
      </section>
      
      <section className="doc-section">
        <h2>Data Communication</h2>
        <p>
          Mini-XAF communicates with the back-end using OData protocol for business objects
          and standard REST API calls for other operations.
        </p>
        <p>
          The DataSource class handles all data operations (CRUD) for a specific business 
          object type.
        </p>
        <pre><code>{`const dataSource = new DataSource('Customer', 'https://your-xaf-api-url');
await dataSource.load();

const customers = dataSource.data;
const newCustomer = await dataSource.create({ name: 'New Customer' });
await dataSource.update(1, { name: 'Updated Customer' });
await dataSource.delete(1);`}</code></pre>
      </section>
      
      <section className="doc-section">
        <h2>Model-Driven Approach</h2>
        <p>
          Mini-XAF uses a model-driven approach similar to XAF. The application model
          is loaded from the back-end during initialization and defines:
        </p>
        <ul>
          <li>Business objects and their properties</li>
          <li>Views and their configurations</li>
          <li>Navigation structure</li>
        </ul>
        <p>
          The model loader processes this information and sets up the application
          structure accordingly.
        </p>
      </section>
    </div>
  );
};

export default DocsPage;
